<template>
  <view class="grid">
    <view style="grid-column-start: 1;grid-column-end: 6;">
      <view
        style="margin-bottom: 10px;background-color: white;width: 100%; border-radius: 10px;border:2px solid;border-color:rgb(230,231,235);">
        <view style="padding: 20px 0px 40px 25px;" class="flex">
          <text style=" padding-right: 30px;font-size: 1.2em;">观测状态</text>
          <text
            style="padding: 0px 70% 0px 0px;font-size: 1.1em;position: relative;top: 0%;color: #cacdd1;">State</text>
          <view
            style="width:25px;border-radius: 8px;border:1.5px solid;border-color:rgb(230,231,235);font-size: 1em;padding: 6px 2px 4px 6px;">
            <uni-icons color="rgb(109,114,127)" style="" type="more-filled" size="20"></uni-icons>
          </view>

          <text style="width: 100%;color: #999;">当前观测的机房为：#{{current_device}}</text>
          <view @click="PowerMeasurement()"
            style="background-color: #F3F4F6;color: #4D5562; width: 10%;border-radius: 10px;padding: 5px 5px 5px 5px;font-size: 0.8em;position: relative;top:25px;left: 0%;text-align: center;">
            {{power_flage ? '暂停':'功率测试'}}
          </view>
        </view>

        <view>
          <text style="padding-left: 25px;padding-bottom: 20px;font-size: 0.9em;">实时数据</text>
          <uni-list style="padding-left: 10px;padding-right: 10px;" :border="false">
            <!-- <uni-list-item v-for="(item, index) in headtitle " :key="index" style="height: 30px;" :title="item.f_name" :border="false" :rightText="Data"></uni-list-item> -->
            <uni-list-item style="height: 40px;" :title="headtitle[0].f_name" :border="false"
              :rightText="Realtime_data[0].field1"></uni-list-item>
            <uni-list-item style="height: 40px;" :title="headtitle[1].f_name" :border="false"
              :rightText="Realtime_data[0].field2"></uni-list-item>
            <uni-list-item style="height: 40px;" :title="headtitle[2].f_name" :border="false"
              :rightText="Realtime_data[0].field3"></uni-list-item>
            <uni-list-item style="height: 40px;" :title="headtitle[3].f_name" :border="false"
              :rightText="Realtime_data[0].field4"></uni-list-item>
            <uni-list-item style="height: 40px;" title="功率" :border="false"
              :rightText="power_flage ? '测量中':power_data"></uni-list-item>
          </uni-list>
          <br>
        </view>
      </view>
      <view
        style="background-color: white;width: 100%;height: 35vh; border-radius: 10px;border:2px solid;border-color:rgb(230,231,235);">
        <EchartsVue ref="EchartsRef" :headtitle="headtitle" :chartdate="Data"></EchartsVue>
      </view>
      <view
        style="margin-bottom: 20px ;margin-top: 10px;background-color: white;width: 100%;height: 450px; border-radius: 10px;border:2px solid;border-color:rgb(230,231,235);">
        <view style="font-size: 1.2em;padding: 10px 20px 10px;">
          <text>画面状态</text>
        </view>

        <VideoVue v-if="current_device==1" :ws="ws"
          rtsp="http://192.168.1.2:7112/live?url=rtsp://admin:@192.168.1.10:554/stream"></VideoVue>

        <VideoVue v-if="current_device==0" :ws="ws"
          rtsp="http://192.168.1.2:7112/live?url=rtsp://admin:@192.168.1.109:554/stream"></VideoVue>

      </view>
    </view>
    <text style="margin-left: 10rpx;">监控截图识别结果</text>
    <view class="IndentifyItem">
      <!-- <view
				style="padding-top: 20px;background-color: white;width: 85%;height: 20vh;border-radius: 10px;border:2px solid;border-color:rgb(230,231,235);">
				<text style=" padding: 20px;font-size: 1.2em;">监控状态</text>			
			</view> -->
      <IndentifyItemVue style="margin-top: 5px;" v-for="(item, index) in Scene" :key="index" :YoloList="item"
        Cheked="checkbox-filled">
      </IndentifyItemVue>
    </view>

  </view>



  <!-- <uni-card>
		<uni-section title="实时信息" type="line" />
		<view class="uni-stat--x flex p-1015">
			<text style="font-weight: 500;font-size: 1.2em;padding: 10px;">实时数据</text>
			<uni-table ref="Items" :loading="loading" stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="80" v-for="(item, index) in headtitle" :key="index">
						{{item.f_name}}
					</uni-th>
					<uni-th>时间</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td>{{ Realtime_data[0].field1 }}</uni-td>
					<uni-td>{{ Realtime_data[0].field2 }}</uni-td>
					<uni-td>{{ Realtime_data[0].field3 }}</uni-td>
					<uni-td>{{ Realtime_data[0].c_time }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<ChartsVue ref="ChartsVueRef" :chartdate="Data" :headtitle="headtitle"></ChartsVue>

		<VideoVue v-if="current_device==0" :ws="ws"
			rtsp="http://192.168.1.2:7112/live?url=rtsp://admin:@192.168.1.10:554/stream"></VideoVue>

		<VideoVue v-if="current_device==1" :ws="ws"
			rtsp="http://192.168.1.2:7112/live?url=rtsp://admin:@192.168.1.12:554/stream"></VideoVue>


		<Sence :socket="ws" :deviceList="deviceList" :Scene="Scene"></Sence>

	</uni-card> -->


</template>
<script>
	import ChartsVue from '@/components/functions/Charts.vue';
import VideoVue from '@/components/functions/Video.vue';
import EchartsVue from '@/components/functions/Echarts.vue';
import IndentifyItemVue from '@/components/functions/IndentifyItem.vue';
	import {
		time
	} from 'echarts';

	export default {
		components: {
			ChartsVue,
			VideoVue,
			EchartsVue,
			IndentifyItemVue

		},
		data() {
			return {
				deviceList: [],
				Scene: [],
				headtitle: [],
				Realtime_data: [{
					field1: '',
					field2: '',
					field3: '',
					c_time: '',
				}],
				Data: [
					[],
					[],
					[],
					[]
				],
				current: 0,
				items: ['柱状图', '条形图'],
				chartRef: null,
				loading: false,
				headtitle: [],
				ws: null,
				device_id: 1,
				sence_id: 1,
				current_device: 0,
				power_time_start: null,
				power_time_end: null,
				power_flage: false,
				power_data: 0.01,
			}
		},
		beforeUnmount() {
			console.log('页面销毁')
			this.ws.close();
		},
		beforeMount() {
			//#ifndef APP-PLUS
			uni.hideTabBar();
			//#endif

			this.ws = uni.connectSocket({
				url: 'ws://192.168.1.111:8080/RealtimeData',
				//url: 'ws://192.168.1.108:8000/RealtimeData',
				// url: 'ws://192.168.209.89:8080/RealtimeData',
				success: () => {
					console.log('WebSocket连接成功');
				},
			});
			this.ws.onOpen(() => {
				console.log('WebSocket连接已打开！');
			});
			this.ws.onMessage((e) => {
				let obj = JSON.parse(e.data);
				console.log(obj)
				switch (obj.topic) {
					case 'device':
						obj.data.forEach((item) => {
							this.deviceList.push({
								value: item.id,
								text: item.device_name,
							});
						});
						break;
					case 'sence':
						this.Scene = obj.data
						break;
					case 'headtitle':
						this.headtitle = obj.data;
						this.$nextTick(()=>{
							this.$refs.EchartsRef.updatecharts(obj.data)
						})
						break;
					case 'data':
						this.Realtime_data = obj.data
						this.Data = [
							[],
							[],
							[],
							[],
							[],
							[],
							[],
							[],
							[],
							[],
							[],
							[]
						]
						for (let i = obj.data.length-1; i >=0 ; i--) {
							this.Data[0].push(obj.data[i].field1)
							this.Data[1].push(obj.data[i].field2)
							this.Data[2].push(obj.data[i].field3)
							this.Data[3].push(obj.data[i].field4)
							this.Data[11].push(obj.data[i].c_time)
						}
						this.$nextTick(() => {
							this.$refs.EchartsRef.updatecharts(obj.data)
						})
						break;
					case 'current_device':
						this.current_device = obj.data
						break;
					case 'power':
						this.power_data = obj.data[0].I*obj.data[0].V
						console.log(obj.data[0].I*obj.data[0].V)
					default:
						break;
				}

			});
		},
		methods: {
			PowerMeasurement() {
				//输出当前时间
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				let localDate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				console.log(localDate)
				if (this.power_flage) {
					this.power_flage = false,
						this.power_time_end = localDate,
						this.ws.send({
							data: JSON.stringify({
								type: "power",
								startDate: this.power_time_start,
								endDate: this.power_time_end,
							})
						});
				} else {
					this.power_flage = true
					this.power_time_start = localDate
				}
			}
		}
	}
</script>

<style scoped>
	a {
		display: block;
		/* 将每个链接设置为块级元素，使其独占一行 */
		margin: 10px 0;
		/* 添加上下边距以增加间距 */
		text-decoration: none;
		color: #007BFF;
	}

	page {
		background-color: rgb(249, 250, 251);
	}

	.DeviceForm {
		padding: 15px;
		background-color: #fff;
	}

	.uni-stat--x {
		border-radius: 4px;
		box-shadow: -1px -1px 5px rgba(0, 0, 0, .1);
		margin-bottom: 15px;
	}

	.p-1015 {
		padding: 10px 15px;
	}

	.uni-stat--app-select {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 900px;
		max-width: 100%;
	}

	.grid {
		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	}

    .IndentifyItem {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(150rpx, auto));
      gap: 20rpx;
      margin-bottom: 50rpx;
    }
  
    /* 移动端适配 - 针对小屏幕优化 */
    @media screen and (max-width: 415px) {
      .IndentifyItem {
        grid-template-columns: repeat(1, minmax(150rpx, auto));
      }
    }
  
    /* 平板及以上设备 */
    @media screen and (min-width: 416px) and (max-width:769px) {
      .IndentifyItem {
        grid-template-columns: repeat(1, minmax(150rpx, auto));
      }
    }
  
  
    @media screen and (min-width: 770px) and (max-width:1023px) {}
  
    /* 大屏幕PC适配 */
    @media screen and (min-width: 1024px) {}
</style>